<script setup>
import { queryAllRole } from '@/api/system/role'
import { queryUserDetail } from '@/api/system/user'
import { PASSWORD_REGEXP, EMAIL_REGEXP, PHONE_REGEXP, IDCARD_REGEXP } from '@/utils/regExp'
const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  visible: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:visible', 'create', 'update'])
const formRef = ref()
const formData = reactive({
  username: '',
  password: '',
  name: '',
  roleId: '',
})
const formRules = reactive({
  username: [{ required: true, trigger: 'blur', message: '请输入账号！' }],
  password: [
    { required: true, trigger: 'blur', message: '请输入密码！' },
    { pattern: PASSWORD_REGEXP, trigger: 'blur', message: '8-16位, 至少包含一位大写字母、小写字母、数字' }
  ],
  name: [{ required: true, trigger: 'blur', message: '请输入昵称！' }],
  roleId: [{ required: true, trigger: 'blur', message: '请选择角色！' }],
})
const roleOptions = ref([])
const handleCreate = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      submitBtnLoading.value = true
      const param = {
        ...formData
      }
      if (!props.id) {
        emit('create', param)
      } else {
        emit('update', param)
      }
    } else {
      return false
    }
  })
}
const resetForm = () => {
  delete formData.id
  formRef.value?.resetFields()
  formData.username = ''
  formData.password = ''
  emit('update:visible')
}
const queryRole = async () => {
  const res = await queryAllRole()
  roleOptions.value = res.data
}
const submitBtnLoading = ref(false)
const editLoading = ref(false)
watch(
  () => props.visible,
  async (newValue, oldValue) => {
    if (newValue) {
      submitBtnLoading.value = false
      queryRole()
      const { id } = props
      if (id) {
        editLoading.value = true
        const { data } = await queryUserDetail(id)
        Object.assign(formData, data)
        editLoading.value = false
      }
    }
  }
)
defineExpose({
  submitBtnLoading
})
</script>

<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="visible"
    :title="id ? '修改用户' : '新增用户'"
    @close="resetForm"
    width="60%"
    align-center
  >
    <el-form v-loading="editLoading" ref="formRef" :model="formData" :rules="formRules" label-width="80px">
      <div v-if="!props.id">
        <el-form-item prop="username" label="账号">
          <el-input v-model="formData.username" placeholder="请输入账号" maxlength="30" clearable />
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input v-model="formData.password" placeholder="请输入密码" maxlength="16" type="password" clearable />
        </el-form-item>
      </div>
      <el-form-item prop="name" label="昵称">
        <el-input v-model="formData.name" placeholder="请输入昵称" maxlength="30" clearable />
      </el-form-item>
      <el-form-item prop="roleId" label="角色">
        <el-select
          v-model="formData.roleId"
          filterable
          placeholder="请选择角色"
          clearable
        >
          <el-option v-for="item in roleOptions" :key="item._id" :label="item.name" :value="item._id" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleCreate" :loading="submitBtnLoading">确认</el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
